<template>
	<view>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="100"
			:labelStyle="{color: '#fff' }">
			<view class="plr15 bg-default1">
				<!-- 		<u-form-item class="u-form-item" label="是否收费" prop="videoInfo.isCharge" borderBottom
					@click="showCharge = true;" ref="item1">
					<u--input v-model="model1.videoInfo.isCharge" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
				<u-form-item class="u-form-item" :label="$t('text.psd1')" prop="videoInfo.name" borderBottom ref="item1">
					<u--input v-model="model1.videoInfo.name" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)":placeholder="$t('text.placeholders')"></u--input>
				</u-form-item>
				<u-form-item class="u-form-item" :label="$t('text.psd2')" prop="videoInfo.type" borderBottom
					@click="showCheckBoxClick('type');" ref="item1">
					<u--input v-model="model1.videoInfo.type" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.psd14')"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
			<!-- 	<u-form-item class="u-form-item" :label="$t('text.psd3')" prop="videoInfo.adddd" borderBottom
					@click="showCheckBoxClick('adddd');" ref="item1">
					<u--input v-model="model1.videoInfo.adddd" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.psd14')"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item class="u-form-item" :label="$t('text.psd4')" prop="videoInfo.yearq" borderBottom
					@click="showYear = true;" ref="item1">
					<u--input v-model="model1.videoInfo.yearq" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.psd14')"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
				<u-form-item class="u-form-item" :label="$t('text.psd5')" prop="videoInfo.price" borderBottom ref="item1">
					<u--input v-model="model1.videoInfo.price" border="none" color="rgba(255, 255, 255, 0.9)"
						type="number" placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.placeholders')"></u--input>
				</u-form-item>
				<u-form-item class="u-form-item" :label="$t('text.psd6')" prop="videoInfo.vipprice" borderBottom ref="item1">
					<u--input v-model="model1.videoInfo.vipprice" border="none" color="rgba(255, 255, 255, 0.9)"
						type="number" placeholderStyle="rgba(255, 255, 255, 0.4)":placeholder="$t('text.placeholders')"></u--input>
				</u-form-item>
				<u-form-item class="u-form-item" :label="$t('text.psd7')" prop="videoInfo.text" borderBottom ref="item1">
					<u--input v-model="model1.videoInfo.text" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.placeholders')"></u--input>
				</u-form-item>
				<u-form-item class="u-form-item" :label="$t('text.psd8')" prop="videoInfo.story" borderBottom ref="item1">
					<u--input v-model="model1.videoInfo.story" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.placeholders')"></u--input>
				</u-form-item>
				<u-form-item class="u-form-item" :label="$t('text.psd9')" prop="videoInfo.sum" borderBottom ref="item1">
					<u--input v-model="model1.videoInfo.sum" border="none" color="rgba(255, 255, 255, 0.9)"
						type="number" placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.placeholders')"></u--input>
				</u-form-item>
				<u-form-item class="u-form-item" :label="$t('text.psd10')" prop="videoInfo.star" @click="showCheckBoxClick('star');"
					ref="item1">
					<u--input v-model="model1.videoInfo.star" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.psd14')"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<!-- 导演 -->
				<!-- <u-form-item class="u-form-item" :label="$t('text.dyan')" prop="videoInfo.star" @click="showCheckBoxClickall('star');"
					ref="item1">
					<u--input v-model="model1.videoInfo.star" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.dyan')"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
			</view>
			<view class="plr15 bg-default1 mt10">
				<u-form-item class="u-form-item" labelPosition="top" :label="$t('text.psd11')" prop="videoInfo.img" ref="item1">
					<u-upload class="mt10" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
						multiple :maxCount="1"></u-upload>
				</u-form-item>
			</view>
			<view class="plr15 bg-default1 mt10">
				<u-form-item class="u-form-item" :label="$t('text.psd12')" prop="videoInfo.isPrivate" @click="showPrivate = true;"
					ref="item1">
					<u--input v-model="model1.videoInfo.isPrivate" border="none" color="rgba(255, 255, 255, 0.9)"
						placeholderStyle="rgba(255, 255, 255, 0.4)" :placeholder="$t('text.psd14')"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			<!-- <view class="plr15 bg-default1 mt10">
				<view v-for="(item,index) in jishuList" :key="index">
					<u-form-item class="u-form-item" label="影视集数" prop="videoInfo.star" ref="item1">
						<u--input v-model="jishu[index].num" border="none" color="rgba(255, 255, 255, 0.9)"
							placeholderStyle="rgba(255, 255, 255, 0.4)" placeholder="请输入" type="number"></u--input>
						<u-icon slot="right" name="close-circle" color="#fff" @click="closeJishu(index)"></u-icon>
					</u-form-item>
					<u-upload :fileList="jishu[index].file" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="1" accept="video"></u-upload>
				</view>
			</view> -->
		</u--form>
		<!-- <view class="add" @click="tjge()">
			<view class="btn">+ 增加</view>
		</view> -->
		<!-- <u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</u-action-sheet> -->
		<!-- 选择是否收费 -->
		<u-action-sheet :actions="list" :closeOnClickOverlay="true" :title="title" :closeOnClickAction="true"
			:show="showCharge" :cancelText="$t('text.cancel')" @select="selectClick" @close="close"></u-action-sheet>
		<u-action-sheet :actions="privateList" :closeOnClickOverlay="true" :title="privateTitle"
			:closeOnClickAction="true" :show="showPrivate" :cancelText="$t('text.cancel')" @select="privateSelectClick"
			@close="close"></u-action-sheet>
		<!-- <u-picker :show="showType" :columns="columnsType" keyName="label" @confirm="confirmType"
			@cancel="cancel"></u-picker>
		<u-picker :show="showAddress" :columns="columnsAddress" keyName="label" @confirm="confirmAddress"
			@cancel="cancel"></u-picker> -->
		<u-picker :show="showYear" :columns="columnsYear" keyName="label" @confirm="confirmYear"
			@cancel="cancel"></u-picker>
		<!-- <u-picker :show="showStar" :columns="columnsStar" keyName="label" @confirm="confirmStar"
			@cancel="cancel"></u-picker> -->

		<u-popup :show="showCheckBox" :round="10" mode="bottom" @close="closeBox" @open="openBox" bgColor="#000">
			<view class="">
				<view style="height: 700rpx;overflow: scroll;">
					<view class="text-center plt15 cl-w ft18">{{$t('text.psd15')}}{{titleName}}</view>
					<view class="flex wrap pd15" style="gap: 30rpx;">
						<view class="checkBox cl-w9" v-for="(item,index) in changeTypeData" v-if="titleName=='视频类型'"
							@click="toggleSelection(item)" :class="{'selected': selectedTypes.includes(item.label)}">
							{{item.label}}
						</view>
						<view class="checkBox cl-w9" v-for="(item,index) in changeTypeData" v-if="titleName=='视频地区'"
							@click="toggleSelection(item)" :class="{'selected': selectedAdddd.includes(item.label)}">
							{{item.label}}
						</view>
						<view class="checkBox cl-w9" v-for="(item,index) in changeTypeData" v-if="titleName=='演员'"
							@click="toggleSelection(item)" :class="{'selected': selectedStar.includes(item.label)}">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="checkBoxbtn">
					<view @click="submitSelection">{{$t('text.qd')}}</view>
				</view>
			</view>
		</u-popup>
		<view style="height: 150rpx;"></view>
		<view class="release flex alcenter space">
			<view class="cl-w flex-c-c" @click="$u.throttle(draftClick, 1000)">
				<u-icon name="order" color="#fff" size="26"></u-icon>
				<view class="ft10">{{$t("text.psd13")}}</view>
			</view>
			<view class="btn" @click="$u.throttle(submit, 1000)">{{$t("text.qd")}}</view>
		</view>
	</view>

</template>

<script>
	import configs from "@/common/config.js"
	export default {
		data() {
			return {
				title: this.$t('text.psd12'),
				list: [{
						name: this.$t('"text.psd18')
					},
					{
						name: this.$t('"text.psd19')
					}
				],
				showCharge: false,

				privateTitle: this.$t('text.psd12'),
				privateList: [{
						name: this.$t('text.psd16'),
						value: 1
					},
					{
						name: this.$t('text.psd17'),
						value: 0
					}
				],
				showPrivate: false,

				showType: false,
				columnsType: [
					[{
						label: '战争片',
						id: 1
					}, {
						label: '科幻片',
						id: 2
					}, {
						label: '偶像片',
						id: 3
					}, {
						label: '武侠片',
						id: 4
					}, {
						label: '古装片',
						id: 5
					}]
				],

				showAddress: false,
				columnsAddress: [
					[{
						label: '内地',
						id: 1
					}, {
						label: '欧美',
						id: 2
					}, {
						label: '日韩',
						id: 3
					}, {
						label: '港台',
						id: 4
					}, {
						label: '其他',
						id: 5
					}]
				],

				showYear: false,
				columnsYear: [
					[{
						label: '2025',
						id: 1
					}, {
						label: '2024',
						id: 2
					}, {
						label: '2023',
						id: 3
					}, {
						label: '2022',
						id: 4
					}, {
						label: '2021',
						id: 5
					}]
				],

				showStar: false,
				columnsStar: [
					[{
						label: '演员1',
						id: 1
					}, {
						label: '演员2',
						id: 2
					}]
				],

				showCheckBox: false,
				selectedTypes: [], // 存储选中的类型
				selectedAdddd: [], // 存储选中的地区
				selectedStar: [], // 存储选中的演员
				changeTypeData: [], //多选弹窗数据
				titleName: '',

				model1: {
					videoInfo: {
						// isCharge: '',
						id: 0,
						name: '',
						type: '',
						typeIds: [], //类型ids
						adddd: '',
						addddIds: [], //地区ids
						yearq: '',
						star: '',
						starIds: [], //演员ids
						img: '',
						uid: uni.getStorageSync("userinfo").id,
						price: '',
						vipprice: '',
						text: '',
						sum: '',
						story: '',
						isPrivate: '', //是否私密
						simi: '', //0=正常,1=私密    
						caogao: 0 //1是草稿
					},
				},
				rules: {
					/* 		'videoInfo.isCharge': {
								type: 'string',
								required: true,
								message: '请选择是否收费',
								trigger: ['blur', 'change']
							}, */
					'videoInfo.name': {
						type: 'string',
						required: true,
						message: this.$t('text.pls2'),
						trigger: ['blur', 'change']
					},
					'videoInfo.type': {
						type: 'string',
						required: true,
						message: this.$t('text.qingxuanz'),
						trigger: ['blur', 'change']
					},
					// 'videoInfo.adddd': {
					// 	type: 'string',
					// 	required: true,
					// 	message: this.$t('text.qingxuanz1'),
					// 	trigger: ['blur', 'change']
					// },
					// 'videoInfo.yearq': {
					// 	type: 'string',
					// 	required: true,
					// 	message: this.$t('text.qingxuanz2'),
					// 	trigger: ['blur', 'change']
					// },
					'videoInfo.price': {
						type: 'string',
						required: true,
						message: this.$t('text.pls3'),
						trigger: ['blur', 'change']
					},
					'videoInfo.vipprice': {
						type: 'string',
						required: true,
						message: this.$t('text.qingxuanz3'),
						trigger: ['blur', 'change']
					},
					'videoInfo.sum': {
						type: 'number',
						required: true,
						message: this.$t('text.qingxuanz4'),
						trigger: ['blur', 'change']
					},
					'videoInfo.img': {
						type: 'string',
						required: true,
						message: this.$t('text.qingxuanz5'),
						trigger: ['blur', 'change']
					},
					'videoInfo.isPrivate': {
						type: 'string',
						required: true,
						message: this.$t('text.qingxuanz6'),
						trigger: ['blur', 'change']
					},

				},
				radio: '',
				switchVal: false,
				fileList1: [],
				jishuList: [],
				jishu: [],
				urls: configs.webUrl,
				id: 0, //视频id
			}
		},
		onLoad(e) {
			this.tjge()
			//console.log(111)
			if (e.id > 0) {
				this.id = e.id
				this.getinfo()
				// console.log(e.id)
			}
			this.init()
		},

		methods: {
			init(){
				this.$httpas.post2({
					data: {
						do: 'creator',
						op: 'juse',
						index: 0
					},
					success: res => {
						this.columnsStar[0] = res
					}
				})
				this.$httpas.post2({
					data: {
						do: 'creator',
						op: 'fenlei_list',
					},
					success: res => {
						this.columnsType[0] = res.type
						this.columnsAddress[0] = res.diqu
					}
				})
				
			},
			sexSelect(e) {
				this.model1.videoInfo.sex = e.name
				this.$refs.uForm.validateField('videoInfo.sex')
			},
			selectClick(e) {
				console.log(e.name)
				this.model1.videoInfo.isCharge = e.name
				this.close()
			},
			//是否私密
			privateSelectClick(e) {
				this.model1.videoInfo.isPrivate = e.name
				this.model1.videoInfo.simi = e.value
				this.close()
			},
			close() {
				this.showCharge = false
				this.showPrivate = false
			},
			updateVideoInfo(field, e) {
				this.model1.videoInfo[field] = e.value[0].label;
				this.cancel();
			},

			cancel() {
				this.showType = this.showAddress = this.showYear = this.showStar = false;
			},

			confirmType(e) {
				this.updateVideoInfo('type', e);
			},

			confirmAddress(e) {
				this.updateVideoInfo('adddd', e);
			},

			confirmYear(e) {
				this.updateVideoInfo('yearq', e);
			},

			confirmStar(e) {
				this.updateVideoInfo('star', e);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},

			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.configs.webUrl + '/api/Common/upload?token=' + uni.getStorageSync(
							"userinfo").token, // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							'token': uni.getStorageSync("userinfo").token,
						},
						success: (res) => {
							var dataarr = JSON.parse(res.data);
							if (dataarr.code == 1) {
								console.log(dataarr.data.url)
								this.model1.videoInfo.img = dataarr.data.url
								resolve(this.configs.imgUrl + dataarr.data.url)

							} else {
								uni.showToast({
									title: dataarr.msg
								})
							}
							// console.log(dataarr)
							// setTimeout(() => {
							// 	resolve(res.data.data);
							// }, 1000);
						},
					});
				});
			},
			//添加集数
			tjge() {
				this.jishuList.push('1');
				this.jishu.push({
					num: '',
					file: [],
				})
			},

			//删除集数
			closeJishu(index) {
				let that = this
				uni.showModal({
					title: this.$t('text.shanc'),
					success(res) {
						if (res.confirm) {
							that.jishuList.splice(index, 1)
							that.jishu.splice(index, 1)
							if (that.jishu.length == 0 || that.jishuList.length == 0) {
								that.jishu = []
								that.jishuList = []
							}
						}
					}
				})
			},
			//提交表单
			submit() {
				this.$refs.uForm.validate().then(async ress => {
					console.log(this.model1.videoInfo)
					// uni.$u.toast('校验通过')
					let params = this.model1.videoInfo
					let res = await this.$httpas.post('/api/creator/video_add', params, {
						token: true
					});
					if (res[1].data.code == 1) {
						this.$u.toast(res[1].data.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})

			},

			//存草稿
			draftClick() {
				this.model1.videoInfo.caogao = 1
				this.$refs.uForm.validate().then(async ress => {
					console.log(this.model1.videoInfo)
					// uni.$u.toast('校验通过')
					let params = this.model1.videoInfo
					let res = await this.$httpas.post('/api/creator/video_add', params, {
						token: true
					});
					if (res[1].data.code == 1) {
						this.$u.toast(res[1].data.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			//获取视频详情
			getinfo() {
				this.$httpas.post2({
					data: {
						do: 'creator',
						op: 'video_info',
						id: this.id
					},
					success: res => {
						// this.list = res 
						this.model1.videoInfo.id = res.id
						this.model1.videoInfo.name = res.name
						if (res.adddd == null) {
							this.model1.videoInfo.adddd = ''
						} else {
							this.model1.videoInfo.adddd = res.addddname
						}
						if (res.type) {
							this.model1.videoInfo.type = res.typename
							this.model1.videoInfo.type = res.typename
						}
						if (res.simi==0) {
							this.model1.videoInfo.simi = '正常'
						}else{
							this.model1.videoInfo.simi = '私密'
						}
						this.model1.videoInfo.yearq = res.yearq
						this.model1.videoInfo.star = res.yanyuan
						this.model1.videoInfo.img = res.img
						this.model1.videoInfo.price = res.price
						this.model1.videoInfo.vipprice = res.vipprice
						this.model1.videoInfo.text = res.text
						this.model1.videoInfo.sum = res.sum
						this.model1.videoInfo.story = res.story
						this.fileList1.push({
							name:res.img,
							url:res.img,
							thumb:res.img,
						});
						// this.model1.videoInfo.isPrivate = res.story

					}
				})

			},
			openBox() {
				// console.log('open');
			},
			closeBox() {
				this.showCheckBox = false
				// console.log('close');
			},
			showCheckBoxClick(changeType) {
				const typeMapping = {
					type: {
						data: this.columnsType[0],
						title: '视频类型'
					},
					adddd: {
						data: this.columnsAddress[0],
						title: '视频地区'
					},
					star: {
						data: this.columnsStar[0],
						title: '演员'
					}
				};

				if (typeMapping[changeType]) {
					this.changeTypeData = typeMapping[changeType].data;
					this.titleName = typeMapping[changeType].title;
				}

				this.showCheckBox = true;
			},

			// 切换选中状态
			toggleSelection(item) {
				const selectionData = this.getSelectionDataByTitle();
				this.updateSelection(selectionData.selectedArray, item.label);
				this.updateSelection(selectionData.idArray, item.id);

				console.log(this.model1.videoInfo.typeIds);
			},

			// 提取通用的更新逻辑
			updateSelection(array, value) {
				const index = array.indexOf(value);
				if (index > -1) {
					array.splice(index, 1); // 如果项已经存在，则删除
				} else {
					array.push(value); // 否则，添加项
				}
			},

			// 提取逻辑根据 titleName 获取对应的数据
			getSelectionDataByTitle() {
				switch (this.titleName) {
					case '视频类型':
						return {
							selectedArray: this.selectedTypes,
								idArray: this.model1.videoInfo.typeIds
						};
					case '视频地区':
						return {
							selectedArray: this.selectedAdddd,
								idArray: this.model1.videoInfo.addddIds
						};
					case '演员':
						return {
							selectedArray: this.selectedStar,
								idArray: this.model1.videoInfo.starIds
						};
					default:
						return {};
				}
			},

			// 提交选择
			submitSelection() {
				const selectionData = this.getSelectionDataByTitle();

				if (selectionData.selectedArray) {
					this.model1.videoInfo[
							`${this.titleName === '视频类型' ? 'type' : this.titleName === '视频地区' ? 'adddd' : 'star'}`] =
						selectionData.selectedArray.join(',');
				}

				this.showCheckBox = false;
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">
	.release {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		background: #000;
		padding: 30rpx;

		.btn {
			background: rgba(11, 144, 249, 1);
			text-align: center;
			border-radius: 50rpx;
			padding: 20rpx 0;
			color: #fff;
			width: 85%;
		}
	}

	.add {
		width: 100%;
		padding: 30rpx;

		.btn {
			border: 1px solid #C3C4C4;
			text-align: center;
			border-radius: 50rpx;
			padding: 16rpx 0;
			color: #fff;
		}
	}

	.u-form-item {
		::v-deep.u-form-item__body {
			padding: 30rpx 0;
		}
	}

	.u--input {
		color: #fff;
	}

	.ft10 {
		font-size: 20rpx;
	}

	.flex-c-c {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.checkBox {
		// width: 21.5%;
		border-radius: 9px;
		text-align: center;
		border: 1px solid #ffffff;
		padding: 9px 4px;
	}

	.selected {
		background: rgba(26, 140, 239, 0.15);
		color: rgba(11, 144, 249, 1);
		border: 1px solid rgba(26, 140, 239, 0.15);
	}

	.checkBoxbtn {
		// position: fixed;
		// bottom: 50rpx;
		// right: 30rpx;
		// left: 30rpx;
		width: 90%;
		margin: auto;

		view {
			background: rgba(11, 144, 249, 1);
			text-align: center;
			border-radius: 50rpx;
			padding: 20rpx 0;
			color: #fff;
		}
	}
</style>